<template>
  <!-- 入口页面 -->
  <div class="editorWrapper">
    <ModuleDialog :dialogShow.sync="dialogShow" />

    <!--头部编辑保存部分Start-->
    <div class="wraper_top">
      <router-link to="/overview">
        <div class="editor_tab_title_top">
          <span class="editor_tab_icon1"></span>
          <div>店铺后台</div>
        </div>
      </router-link>
      <div class="editor_tab_title_top" @click="changeComponent">
        <span class="editor_tab_icon2"></span>
        <span class="change_text">更换模板</span>
      </div>
      <div class="editor_tab_title_top no-l-b">
        <span id="savetip">
          {{ !isSaveTip ? "所有更改已保存" : "正在保存..." }}
        </span>
      </div>
      <div slot="footer" class="dec_footer">
        <el-button type="primary" v-show="currentTab == 0 || currentTab == 2" @click="submit()">保存</el-button>
        <el-button type="primary" v-show="currentTab == 1" @click="submit2">保存控件</el-button>
      </div>
    </div>
    <div class="editorPage">
      <div class="editorPage_left">
        <editorTab @change="selectTab" />
        <div class="editor_view">
          <!-- 组件列表 -->
          <EditorComponent v-if="currentTab == 0" @change="addComponents" />
          <!-- 控件列表 -->
          <EditorControl v-if="currentTab == 1" @saveControlId="saveControlId" @change="addComponents2" />
          <!-- 页面列表 -->
          <EditorControlPage ref="editorControlPage" @change="addComponents" @changePage="selectPage"
            :templateId="templateId" @changeFncMarkPage="changeFncMarkPage" v-show="currentTab == 2"
            :activePageId="activePage ? activePage.modelId : ''" />
        </div>
      </div>
      <div class="editorPage_main">
        <div class="tab_con">
          <!-- 个人中心 -->
          <UserCenter v-if="
              currentTab == 2 &&
                isUsercenterCompontents &&
                userCenterType === 'usercenter'
            " ref="usercenter" @userCenterChang="userCenterChang">
          </UserCenter>
          <!-- 组件以及页面预览 -->
          <EditorPreview @settingEmpty="settingEmpty" ref="EditorPreview" v-show="
              !isUsercenterCompontents && (currentTab == 0 || currentTab == 2)
            " @change="setCurrentComponent" :components.sync="components" @addchange="addComponents"
            @chengList="chengList" />
          <!-- 控件预览 -->
          <EditorPreview v-show="currentTab == 1" @change="setCurrentComponent" :components.sync="components2" />
        </div>
      </div>
      <div class="editorPage_right" :style="!currentComponent ? 'display:none;' : ''">
        <div class="editorPage_right_wrap">
          <!-- 样式编辑 -->
          <EditorForm v-show="!isUsercenterCompontents && pageType == 0" :current-component="currentComponent"
            @change="changeData" :templateId="templateId" />
          <!-- 编辑链接地址 -->
          <EditorLinkAddress v-show="!isUsercenterCompontents && pageType == 1" />
          <!--End-->
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { addAssembly, getAssembly, addPage } from "@/api/group/group";
import { IComponent } from "./interfaces/component";
import { Vue, Component, Watch, Ref } from "vue-property-decorator";
import EditorComponent from "./EditorComponent.vue";
import EditorControl from "./EditorControl.vue";
import EditorControlPage from "./EditorControlPage.vue";
import EditorPreview from "./EditorPreview.vue";
import EditorForm from "./EditorForm.vue";
import EditorTab from "./EditorTab.vue";
import ModuleDialog from "./compontents/moduleDialog/moduleDialog.vue";
import {
  addControl,
  deleteControl,
  addControlMore,
  getControl,
  editControls,
} from "@/api/decoration/decoration";
import EditorLinkAddress from "./EditorLinkAddress.vue";
import { addTemplate, getTemplate } from "@/api/decoration/decoration";
import SpellPage from "@/views/decoration/SpellPage.vue";
import BusinessSuper from "@/views/decoration/BusinessSuper.vue";
import UserCenter from "@/views/decoration/UserCenter.vue";
@Component({
  components: {
    EditorComponent,
    EditorControl,
    EditorControlPage,
    EditorPreview,
    EditorForm,
    EditorTab,
    ModuleDialog,
    EditorLinkAddress,
    UserCenter,
    SpellPage,
    BusinessSuper,
  },
})
export default class Editor extends Vue {
  /** 更换模板弹窗 */
  dialogShow = false;

  /** 当前编辑的组件 */
  currentComponent: IComponent = null;

  /** 组件列表 */
  components: IComponent[] = [];

  /** 控件列表 */
  components2: IComponent[] = [];

  /** 当前编辑的控件 */
  currentComponent2: IComponent = null;

  /** 左侧导航栏num */
  currentTab = 0;

  /** 当前自定义页面id */
  pageId: string = null;

  /** */
  saveTemplateId: string = null;

  /** 模板id */
  templateId: string = null;

  /** 原来的组件ids */
  assembleIds: string[] = [];

  /** 页面类型 默认自定义页面 0 */
  pageType = 0;

  /** 保存提示 */
  isSaveTip = false;

  @Ref() readonly EditorPreview!: EditorPreview;

  @Ref() readonly editorControlPage: EditorControlPage;

  get currentTemplateId() {
    return this.$store.state.decoration.templateId;
  }

  get activePage() {
    return this.$store.state.decoration.activePage;
  }

  /**
   * 获取当前页面操作栏目
   */
  get activePageType() {
    return this.$store.state.decoration.activePageType;
  }

  /**
   * 判断是不是用户中心
   */
  get isUsercenterCompontents() {
    return this.$store.state.decoration.isUsercenterCompontents;
  }

  /**
   * 判断是不是自定义分类拼团页面
   */
  get isCustomCompontents() {
    return this.$store.state.decoration.isCustom;
  }

  /** 判断用户是否点击了不同的分类页 */
  get saleMode() {
    return this.$store.state.decoration.saleMode;
  }

  /** 获取功能页面类型 */
  get userCenterType() {
    return this.$store.state.decoration.userCenterType;
  }

  @Watch("currentTemplateId")
  handleTemplateIdChange(v) {
    this.templateId = v;
  }

  @Watch("currentTab")
  handleTab() {
    if (this.currentTab === 2) {
      // 获取页面中营销页面数据
      this.editorControlPage.getMarketingPage();
    }
  }

  /**
   * 页面初始化
   */
  init(id) {
    this.components = [];
    this.currentComponent = null;
    this.templateId = id;
    this.$store.dispatch("decoration/updateSaveTemplateId", id);
    this.$store.commit("decoration/SET_TEMPLATEID", id);
    this.$store.commit("decoration/SET_SAVETEMPLATEID", id);
    this.pageId = null;
    this.getControl(id);
  }

  created() {
    this.getTemplateList();
  }

  /**
   * 清空setting设置
   */
  settingEmpty() {
    this.currentComponent = null;
  }

  /**
   * 获取模板列表
   * isDevTemplate 默认模板 1是 0否
   * 模板是否使用中 0 否, 1 是
   * 自定义没有
   */
  async getTemplateList() {
    const getPageListData = {
      onlineStatus: 1,
      isAll: 0,
    };
    const res = await getTemplate(getPageListData);
    try {
      if (res.code === 200) {
        /**  获取非默认模板（即为正在使用中的模板） */
        if (res.data.length > 0) {
          /** 如果有，即为使用中模板的curd */
          this.init(res.data[0].id);
        } else {
          /** 否则新建一个非默认模板 */
          this.creatNotDefTem();
        }
      } else {
        this.$message.warning(`获取数据失败`);
      }
    } catch (e) {
      this.$message.error(`获取模版失败，请稍后重试！`);
    }
  }

  /**
   * 新建非默认模板并赋值到当前模板list
   */
  async creatNotDefTem() {
    const params = { isDevTemplate: 0, onlineStatus: 1 };
    try {
      const res = await addTemplate(params);
      if (res.code === 200) {
        this.init(res.data.id);
      }
    } catch (e) {
      this.$message.error(`创建模版失败，请稍后重试！`);
    }
  }

  /**
   * 保存当前模版为默认模版
   */
  async setOnlineTemplate(id) {
    const params = {
      id,
      isDevTemplate: 0,
      onlineStatus: 1,
    };
    try {
      const res = await addTemplate(params);
      this.isSaveTip = false;
      if (res.code === 200) {
        this.$store.commit("decoration/SET_SAVETEMPLATEID", id);
      }
    } catch (e) {
      this.$message.error(`设置默认模版失败，请稍后重试！`);
    }
  }

  /**
   * 获取默认模板里的控件
   */
  async getDefaultControl(templateId) {
    try {
      const res = await getControl({ templateId });
      if (res.code === 200) {
        return res.data;
      }
    } catch (e) {
      this.$message.error(`获取控件失败，请稍后重试！`);
    }
  }

  /**
   * 初始化获取控件列表
   * 如果列表没数据，使用前端维护的默认控件及配置，如果有数据则不做处理
   */
  async getControl(templateId) {
    const data = [
      {
        id: 12,
        templateId: this.$store.state.decoration.saveTemplateId,
        pluginProperties: JSON.stringify(this.components2),
        pluginNameCn: "底部导航",
        pluginNameEn: "navBar",
      },
    ];
    console.log("跑了1次");
    try {
      const res = await getControl({ templateId });
      if (res.data.length === 0) {
        this.addControlMore(data);
      }
    } catch (e) {
      console.log(e);
      // this.$message.error(`获取控件列表失败，请稍后重试！`);
    }
  }

  /**
   * 新增控件
   */
  async addControlMore(data) {
    const res = await addControlMore(data);
    try {
      if (res.code === 200) {
        this.$message.success(`操作成功！`);
      }
    } catch (e) {
      this.$message.error(`新增控件失败，请稍后重试！`);
    }
  }

  /**
   * 保存自定义页面
   * chanel: subBtn  pageTab  leftTab
   */
  async submit(nomessage) {
    // { chanel }
    this.isSaveTip = true;
    if (this.isUsercenterCompontents) {
      const usercenter = this.$refs.usercenter as HTMLFormElement;
      return usercenter.submit();
    }
    const defaultTemplateId = this.$store.state.decoration.templateId;
    const saveTemplateId = this.$store.state.decoration.saveTemplateId;
    // 删除原先模板里的控件
    if (defaultTemplateId !== saveTemplateId) {
      await this.deleteTemplateControl({ defaultTemplateId });
    }
    // 如果设置的模版不是默认模版
    if (defaultTemplateId !== saveTemplateId) {
      this.confirmTempalate({
        defaultTemplateId,
        saveTemplateId,
      });
    } else {
      // if (!this.pageId) return this.$message.warning(`请先选择自定义页面！`);
      // 格式话保存数据
      const data = this.formateComponents({ defaultTemplateId }) || [];
      if (this.$store.state.decoration.activePageType === "bussiness") {
        // 营销页面不保存
        this.isSaveTip = false;
        return;
      }
      if (data.length && this.isEmpetyCubox(data).length) {
        this.isSaveTip = false;
        return;
      }
      if (data.length && !this.isNavLength4(data)) return;
      this.addNewPage(data, 2, nomessage);
    }
  }

  /**
   * 确认是否使用当前模版为默认模版
   */
  confirmTempalate({ defaultTemplateId, saveTemplateId }) {
    this.$confirm("是否保存当前模版为默认模版", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        this.setOnlineTemplate(defaultTemplateId);
      })
      .catch(() => {
        this.isSaveTip = false;
        this.$store.commit("decoration/SET_FIRSTSTATUS", false);
        this.$store.commit("decoration/SET_TEMPLATEID", saveTemplateId);
        this.$message.info("已取消");
      });
  }

  /**
   * 删除原先模板里的控件
   */
  async deleteTemplateControl({ defaultTemplateId }) {
    const ids = await this.getTempControlList();
    if (ids.length > 0) {
      this.addOrEditControl(
        this.checkIsdefaultTemp(),
        this.checkType(),
        await this.getDefaultControl(defaultTemplateId),
      );
    }
  }

  /**
   * 格式话保存数据
   */
  formateComponents({ defaultTemplateId }) {
    const data = [];
    console.log("保存的components", this.components);
    this.components.forEach((item) => {
      const properties = JSON.stringify({ ...item });
      const assembly = {
        properties,
        pageId: this.pageId,
        templateId: defaultTemplateId,
        modelId: this.saleMode ? this.saleMode : null,
      };
      data.push(assembly);
    });
    return data;
  }

  /**
   * 判断魔方组件 图片是不是传完整
   */
  isEmpetyCubox(coms) {
    for (let index = 0; index < coms.length; index++) {
      const item = coms[index];
      if (item.properties) {
        const properties = JSON.parse(item.properties);
        if (
          properties.value === "CubeBox" &&
          properties.formData.subEntry.length
        ) {
          const arr = properties.formData.subEntry.filter((item) => !item.img);
          if (arr.length) {
            this.$message.warning(
              "该页面使用了魔方组建,蓝色区域请添加完整的图片",
            );
            (
              document.querySelector(`#editor-preview-com-${index}`) as any
            ).click();
            return arr;
            break;
          }
        }
      }
    }
    return [];
  }

  /**
   * 判断店铺导航 至少4个
   */
  isNavLength4(coms) {
    let flag = true;
    for (let index = 0; index < coms.length; index++) {
      const item = coms[index];
      if (item.properties) {
        const properties = JSON.parse(item.properties);
        if (
          properties.value === "StoreNavigation" &&
          properties.formData.storeNavigations.length < 4
        ) {
          this.$message.warning("店铺导航最少添加4个");
          flag = false;
          break;
        }
      }
    }
    return flag;
  }

  /**
   * 判断是当前模板还是使用装修模板
   */
  async checkCurrentTemp() {
    let pageId = "";
    const check =
      this.$store.state.decoration.saveTemplateId ===
      this.$store.state.decoration.templateId;
    if (!check) {
      const data = {
        isDef: 1,
        pageName: this.$store.state.decoration.pageName,
        templateId: this.$store.state.decoration.saveTemplateId,
      };
      const res = await addPage(data);
      try {
        if (res.code === 200) {
          pageId = res.data.id;
        }
      } catch (e) {
        console.log(e);
      }
      return pageId;
    }
  }

  /**
   * 检查是否默认模板
   */
  checkIsdefaultTemp() {
    let isdefaultTemp = true;
    if (
      this.$store.state.decoration.templateId ===
      this.$store.state.decoration.saveTemplateId
    ) {
      isdefaultTemp = false;
    }
    return isdefaultTemp;
  }

  /**
   * 是保存还是修改
   */
  checkType() {
    const type = this.checkIsdefaultTemp() ? 1 : 0;
    return type;
  }

  /**
   * 修改/新增控件页面
   * isdefaultTemp是否是默认模板
   */
  async addOrEditControl(isdefaultTemp, type, controlList) {
    const controlItem = this.controlItem;
    const controlIndex = this.controlIndex;
    const data = {
      ...controlItem,
      pluginProperties: JSON.stringify(this.components2),
      templateId: this.$store.state.decoration.templateId,
    };
    if (isdefaultTemp) {
      await this.saveDefaultTemplate({ controlIndex, controlList, type });
    } else {
      if (data.pluginNameEn == "navBar" && data.pluginProperties !== "[]") {
        // 始终保持底部导航第一位置为首页 路径为 /pages/index/index
        const pluginProperties = JSON.parse(data.pluginProperties);
        pluginProperties[0].formData.menuList.forEach(
          (item) => (item.getFrom = this.$store.state.decoration.getFrom),
        );
        pluginProperties[0].formData.menuList[0].linkUrl = "/pages/index/index";
        data.pluginProperties = JSON.stringify(pluginProperties);
      }
      const res = await addControl(data);
      try {
        if (res.code === 200) {
          this.$message.success(`${type === 1 ? "新增" : "修改"}控件成功`);
        }
      } catch (e) {
        this.$message.warning(`${type === 1 ? "新增" : "修改"}控件失败`);
      }
    }
  }

  /**
   * 保存默认模版
   */
  async saveDefaultTemplate({ controlIndex, controlList, type }) {
    const saveTemplateId = this.$store.state.decoration.saveTemplateId;
    controlList[controlIndex].pluginProperties = JSON.stringify(
      this.components2,
    );
    controlList.forEach((item) => (item.templateId = saveTemplateId));
    const res = await editControls(controlList);
    try {
      if (res.code === 200) {
        this.$message.success(`${type === 1 ? "新增" : "修改"}控件成功`);
      }
    } catch (e) {
      this.$message.warning(`${type === 1 ? "新增" : "修改"}控件失败`);
    }
  }

  /**
   * 点击控件时拿到控件信息
   */
  saveControlId({ item, index }) {
    this.$store.commit("decoration/SET_LINK_FORM", "bottomNav");
    this.controlItem = item;
    this.controlIndex = index;
  }

  /**
   * 使用默认模板时获取原先模板中的数据
   */
  async getTempControlList() {
    const data = {
      templateId: this.$store.state.decoration.templateId,
    };
    const res = await getControl(data);
    if (res.code === 200) {
      return res.data.map((o) => {
        return o.id;
      });
    } else {
      this.$message.warning(`获取数据失败`);
    }
  }

  /**
   * 获取当前templateId控件数据
   */
  async getControlList() {
    const res = await getControl({
      templateId: this.$store.state.decoration.templateId,
    });
    if (res.code === 200) {
      this.controlList = res.data;
      this.addOrEditControl(true, 2, res.data);
    } else {
      this.$message.error(`获取数据失败，请稍后重试！`);
    }
  }

  /**
   * 判断正在使用中的模板是不是templateID
   * 模板是否使用中 0 否, 1 是 onlineStatus
   */
  async getTemplateLists() {
    const res = await getTemplate({ onlineStatus: 1 });
    try {
      if (res.code === 200) {
        /**  获取非默认模板（有即为正在使用中的模板） */
        if (res.data.length > 0) {
          const onlineTemp = res.data[0].id;
          if (this.$store.state.decoration.templateId === onlineTemp) {
            this.addOrEditControl(false, 2, []);
          } else {
            /**  templateId为默认模板的控件配置saveTemplate，然后复制保存当前修改，更新store里的tmplateid */
            this.getControlList();
          }
        }
      } else {
        this.$message.error(`获取数据失败，请稍后重试！`);
      }
    } catch (e) {
      this.$message.error(`获取数据失败，请稍后重试！`);
    }
  }

  /**
   * 批量删除控件
   */
  async deleteControl(ids) {
    let go = false;
    try {
      const res = await deleteControl(ids);
      if (res.code === 200) {
        go = true;
      }
      return go;
    } catch (e) {
      this.$message.error(`批量删除控件失败，请稍后重试！`);
    }
  }

  /**
   * 1.如果当前模板是 使用中的模板调用addOrEditControl直接修改，
   * 2.如果当前模板是默认模板，需要将当前模板控件复制出，然后保存当前修改到saveTemplate，更新store里的tmplateid
   */
  async submit2() {
    this.getTemplateLists();
  }

  /**
   * 新增页面
   * chanel: subBtn  pageTab  leftTab
   */
  async addNewPage(data, type, nomessage) {
    // 说明点击保存
    if (typeof nomessage === "object") nomessage = 0;
    if (!data.length && !nomessage)
      return this.$message.warning(`当前页面组件为空，请添加组件进行保存`);
    if (!data.length) {
      this.isSaveTip = false;
      return false;
    } else if (!this.checkClassPage(JSON.parse(data[0].properties || "{}"))) {
      // 分类页校验输入是否完成
      this.isSaveTip = false;
      return false;
    }
    try {
      const res = await addAssembly(data);
      this.isSaveTip = false;
      if (res.code === 200 && !nomessage) {
        this.$message.success(`${type === 1 ? "新增" : "修改"}页面成功`);
      }
    } catch (error) {
      this.$message.warning(`${error}操作失败`);
    }
  }

  /**
   * 校验分类页输入是否完成
   * chanel: subBtn  pageTab  leftTab
   */
  checkClassPage(data) {
    let flag = true;
    if (["SpellPage", "BusinessSuper"].includes(data.value)) {
      const formData = data.formData || {};
      const { firstCatList = [], selectMode, selectType } = formData;
      let errMsg = "";
      if (selectMode === 2 && selectType === 2) {
        firstCatList.forEach((i) => {
          if (!i.classChart || !i.classChart.length) {
            errMsg = `${i.category.name}一级分类下未添加分类图，请添加！`;
            flag = false;
          }
        });
      }
      if (!flag) {
        this.$message.error(errMsg);
      }
    }
    return flag;
  }

  /**
   * 新增组件
   */
  addComponents(com: IComponent, index?: number) {
    console.log("新增com", com);
    if (
      this.components.length > 0 &&
      ["SpellPage", "BusinessSuper"].includes(this.components[0].value)
    ) {
      this.components = this.components.splice(0, 1);
      if (com.type) {
        return;
      } else {
        return this.$message.error("分类页不能添加组件！");
      }
    }
    if (this.activePageType === "bussiness") {
      return this.$message.warning("营销页面无法添加组件");
    } else {
      if (index) {
      } else {
        if (com) {
          this.components.push(com);
        }
        this.currentComponent = com;
        const i = this.components.length - 1;
        this.EditorPreview.setCurrentFlag(i);
      }
    }
  }

  /**
   * 新增控件
   */
  addComponents2(com: IComponent) {
    this.components2 = [];
    this.components2.push(com);
    this.currentComponent = com;
  }

  @Watch("saleMode")
  pickPage() {
    // const collageCategoryPage = this.editorControlPage.collageCategoryPage;
    // const classificationPage = this.editorControlPage.classificationPage;
    const activePage = this.activePage;
    // const modeType =
    //   activePage.pageName === "商超分类页"
    //     ? classificationPage
    //     : collageCategoryPage;
    // const link = "/pages/index/index?page=home";
    this.getPageAssembly(activePage.id); //  获取页面数据
    // this.selectPage(activePage);
    // this.editorControlPage.selectcollagePage(
    //   "customize",
    //   link,
    //   modeType,
    //   activePage,
    // );
  }

  @Watch("activePage")
  /** 获取当前自定义页面的id */
  selectPage(item) {
    if (this.isUsercenterCompontents) return;
    if (!!item) {
      if (this.$store.state.decoration.activePageType === "bussiness") {
        this.components = item.components;
        this.currentComponent = null;
        this.isSaveTip = false;
        return false;
      }

      // 获取对象为空
      item = this.activePage;
      const id = item.id;
      const name = item.pageName;
      this.pageType = 0;
      this.pageId = id;
      this.currentComponent = null;
      this.getPageAssembly(id); //  获取页面数据
      const checkTempId = this.$store.state.decoration.templateId;
      if (checkTempId.length > 0) {
        this.$store.dispatch("decoration/updatePageName", name);
      }
    } else {
      this.isSaveTip = false;
      this.components = [];
    }
  }

  chengList(componentList: IComponent[]) {
    this.components = componentList;
  }

  /**
   * 获取页面组件
   */
  async getPageAssembly(id) {
    const res = await getAssembly({
      pageId: id,
      templateId: this.templateId,
      modelId: this.saleMode ? this.saleMode : null,
    });
    try {
      this.isSaveTip = false;
      if (res.code === 200) {
        const newList = [] as any;
        this.assembleIds = [];
        res.data.forEach((item) => {
          newList.push(JSON.parse(item.properties));
          this.assembleIds.push(item.id);
        });
        this.components = newList;
      }
    } catch (error) {
      this.$message.error("获取页面组件失败，请稍后重试！");
    }
  }

  /**
   * 点击选择需要编辑组件
   */
  setCurrentComponent(com: IComponent) {
    console.log("点击com", com);
    // this.editorControlPage.getMarketingPage();
    const saleMode = this.$store.state.decoration.saleMode;
    if (saleMode && saleMode > 0) {
      const selectItem = this.editorControlPage.marketingPage.filter(
        (item) => item.id === saleMode,
      );
      com.label = selectItem[0].modeName;
    }
    this.currentComponent = com;
  }

  /**
   * 点击左侧导航栏
   */
  selectTab(currentTab: number) {
    this.currentTab = currentTab;
  }

  changeData(data) {
    this.currentComponent.formData = data;
  }

  /**
   * 更换模板
   */
  changeComponent() {
    this.dialogShow = true;
  }

  /**
   * 切换功能页面和营销页面
   */
  changeFncMarkPage() {
    this.pageType = 1;
  }

  /**
   * 初始化用户是不是第一次编辑
   */
  destroyed() {
    this.$store.commit("decoration/SET_FIRSTSTATUS", false);
  }
  userCenterChang(e) {
    this.isSaveTip = e;
  }
}
</script>

<style lang="scss" scope>
@import "@/assets/styles/decoration/editorPage";
#editor__preview_position {
  position: relative;
  padding-bottom: 15px;
  overflow: auto;
  width: 375px;
  height: calc(100vh - 80px);
  border: 1px solid #ccc;
  background-color: #fff;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-bottom: 100px;
  visibility: hidden;
}
#editor__from_position {
  width: 435px;
  height: 667px;
  overflow-y: scroll;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding-bottom: 50px;
}
/**新的编辑样式**/
.editorPage_right_wrap {
  // height: 100%;
  width: 405px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
div::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}
.editor__preview {
  height: calc(100vh - 80px) !important;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
}

#savetip {
  font-size: 14px;
  color: #888;
  margin-left: 6px;
}
.no-l-b {
  border-right: none !important;
}
</style>
